import { initState } from "./state";
import { compileToFunction } from './compiler/index.js'
import { mountComponent } from './lifecircle.js'
import { mergeOptions } from './utils/index'
import { callHook } from './lifecircle'
export function initMixin(Vue) {
    Vue.prototype._init = function (options) {
        const vm = this

        // 合并数据  constructor 是为了防止，组件创建的时候，实例可能不是 vue（可能创建多个 vue 实例）
        vm.$options = mergeOptions(vm.constructor.options, options);

        // 调用 beforeCreate 生命周期函数
        callHook(vm, 'beforeCreate')
        // 初始化数据
        initState(vm)
        // 调用 created 生命周期函数
        callHook(vm, 'created')

        // 挂载
        if (vm.$options.el) {
            this.$mount(vm.$options.el)
        }
    }
    Vue.prototype.$mount = function (el) {
        // 这里是执行了 _init 才会到这一步，所以里面有 $options
        const vm = this;
        const options = vm.$options
        el = document.querySelector(el);
        vm.$el = el
        if (!options.render) {
            let template = options.template;
            if (!template && el) {
                template = el.outerHTML;
            }
            // 生成render函数
            const render = compileToFunction(template);
            options.render = render;
        }
        // 挂载组件
        mountComponent(vm, el);
    }
}

